<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Demo</title>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width"/>
    <base href="/"/>
    <link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>
    <script type="text/javascript" th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" th:src="@{/webjars/js-cookie/js.cookie.js}"></script>
</head>
<body>
<h1>Demo</h1>
<div class="container unauthenticated">
    With GitHub: <a th:href="@{/oauth2/authorization/github}">click here</a>
</div>
<div class="container unauthenticated">
    With Demo: <a th:href="@{/oauth2/authorization/demo}">click here</a>
</div>
<div class="container unauthenticated">
    With Gitee: <a th:href="@{/oauth2/authorization/gitee}">click here</a>
</div>
<div class="container authenticated" style="display:none">
    Logged in as: <span id="user"></span>
    <div>
        <button onClick="logout()" class="btn btn-primary">Logout</button>
    </div>
</div>
<script type="text/javascript">
    function contextPath() {
        var path = window.location.pathname;
        return path.substring(0, path.substr(1).indexOf('/') + 1);
    }
    $.ajaxSetup({
        beforeSend : function(xhr, settings) {
            if (settings.type === 'POST' || settings.type === 'PUT' || settings.type === 'DELETE') {
                if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url))) {
                    // Only send the token to relative URLs i.e. locally.
                    xhr.setRequestHeader("X-XSRF-TOKEN",
                        Cookies.get('XSRF-TOKEN'));
                }
            }
        }
    });
    $.get(contextPath() + "/user", function(data) {
        $("#user").html(data.name);
        $(".unauthenticated").hide()
        $(".authenticated").show()
    });
    var logout = function() {
        $.post(contextPath() + "/logout", function() {
            $("#user").html('');
            $(".unauthenticated").show();
            $(".authenticated").hide();
        });
        return true;
    }
</script>
</body>
</html>